<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <el-dialog :visible.sync="showDialog" :destroy-on-close="false" title="指派顾问" width="800px" :with-header="false">
            <div class="tools">
                <div class="left">
                    <el-input placeholder="搜索姓名、手机号" v-model="kw" size="small"></el-input>
                    <el-button style="margin:0 8px;" size="small" @click="loadData()">搜索</el-button>
                    <el-button v-if="kw" @click="clearHandle()" size="mini" type="text">清空</el-button>
                </div>

                <div class="right" v-if="!pid">
                    <post-selector v-model="postId" style="margin-right: 15px;"></post-selector>
                    <el-button @click="loadData" icon="el-icon-refresh" size="mini">刷新</el-button>
                </div>
            </div>

            <el-table v-loading="loading" :default-sort="defaultSort" size="mini" :data="brokers" height="400"
                highlight-current-row @current-change="handleCurrentChange">
                <el-table-column sortable prop="id" label="#" width="60px" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="mobile" label="电话" />
                <el-table-column sortable prop="post_title" label="所属项目" />
                <!-- <el-table-column sortable prop="total_clue_count" label="总线索" /> -->
                <!-- <el-table-column sortable prop="pending_clue_count" label="未处理线索" /> -->
                <el-table-column sortable prop="thread_count" label="持有线索数" />
                <el-table-column sortable prop="customer_count" label="持有客户数" />
                <el-table-column label="选择" width="60px">
                    <template slot-scope="scope">
                        <i style="size:20px;color:#1989fa;" v-if="activeBrokerId === scope.row.user_id"
                            class="el-icon-success" />
                    </template>
                </el-table-column>
            </el-table>


            <div class="footer">
                <div></div>
                <div>
                    <el-button size="mini" @click="cancel" icon="el-icon-close">取消</el-button>
                    <el-button size="mini" :disabled="!canSubmit" :loading="loading" @click="onsubmit" type="primary" icon="el-icon-check">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import UserSelector from "./UserSelector";
import { getBrokerProfileList } from '@/api/user'
export default {
    components: { UserSelector },
    name: "assign-user",
    props: {
        brokerId: { type: Number, default: null },
        title: { type: String, default: "" },
        pid: { type: Number, default: null }
    },
    data () {
        return {
            kw: '',
            showDialog: false,
            defaultSort: {
                prop: 'total_clue_count',
            },
            activeBrokerId: null,
            allBrokers: [],
            postId: null,
            groupsData: [],
            loading: false,
        };
    },

    watch: {
        brokerId: {
            deep: true,
            immediate: true,
            handler (bid) {
                // pass
                this.activeBrokerId = bid
            }
        },
        pid: {
            deep: true,
            immediate: true,
            handler (bid) {
                // pass
                this.postId = bid
            }
        }
    },

    mounted: function () {
        this.loadData();
    },

    computed: {
        brokers: function () {
            if (this.postId) {
                return this.allBrokers.filter((b) => {
                    return b.post_id == this.postId
                })
            }
            return this.allBrokers
        },
        canSubmit: function () {
            return true
        },
    },

    methods: {
        clearHandle: function () {
            this.kw = ''
            this.loadData()
        },
        handleCurrentChange: function (row) {
            this.activeBrokerId = row.user_id
        },

        loadData: function () {
            this.loading = true;
            var query = {
                kw: this.kw,
                per_page: 99999999,
            };
            getBrokerProfileList(query).then((resp) => {
                this.loading = false;
                if (resp.status != 0) {
                    return;
                }
                this.allBrokers = resp.data.result.filter((b) => {
                    //   return b.group_value == 'broker'
                    return b;
                });
            });
        },
        onsubmit () {
            // todo 
            var bid = this.activeBrokerId
            this.$emit("submit", bid);
        },
        cancel () {
            this.showDialog = false;
        },
    },
};
</script>
<style scoped>
.footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tools .left,
.tools .right {
    display: flex;
}
</style>

